

<!--  / banner  -->
{notempty name='ads'}
<div class="banner indBanner"> 
	<div class="swiper-container indSwiper">
		<div class="swiper-wrapper">
			{foreach $ads as $vo}
			<div class="swiper-slide">
				<a class="indBanner_box" href="javascript:;">
<!--					<div class="indBanner_txt">-->
<!--						<h6>海量网站等你选择</h6>-->
<!--						<p>拥有一个属于您得高品质网站，从现在开始</p>-->
<!--					</div>-->
					<div class="indBanner_bg" style="background: url(__CDN__{$vo.image}) center/cover no-repeat;"></div>
				</a>
			</div>
			{/foreach}
		</div>
	</div>
	<!-- <div class="computer">
		<img src="__CDN__/home/images/computer.png" alt="" width="100%">
	</div> -->
	<div class="indSwiper_prev">
		<img src="__CDN__/home/images/prev.png" alt="">
	</div>
	<div class="indSwiper_next">
		<img src="__CDN__/home/images/next.png" alt="">
	</div>
</div>
{/notempty}
<!--  / banner  -->

<!--  / warpper  -->
<main class="warpper"> 
	
	<div class="indSec1 padding80">
		<div class="container">
			<div class="comment_title">
				<h6>服务内容</h6>
				<p>我们擅长什么</p>
			</div>
			<ul class="indSec1_list marginTop60 transitionDelay2">
				<li>
					<img src="__CDN__/home/images/indSec1_img01.png" alt="">
					<h6>微享极速建站</h6>
					<p>打破传统网站模式，让所有企业能够在最短时间内拥有一套高端网站，让微享成为一种潮流！</p>
				</li>
				<li>
					<img src="__CDN__/home/images/indSec1_img02.png" alt="">
					<h6>微信小程序开发</h6>
					<p>为您打造有价值、有个性的小程序产品，给您高效的 服务和高品质的体验。</p>
				</li>
				<li>
					<img src="__CDN__/home/images/indSec1_img03.png" alt="">
					<h6>系统软件开发</h6>
					<p>原生态开发模式，提供系统策划，视觉设计，功能交互、程序开发、测试体验与一体的定制化商城系统解决方案。</p>
				</li>
			</ul>
		</div>
	</div>

	<div class="indSec2 padding80">
		<div class="container">
			<div class="comment_title">
				<h6>网站案例</h6>
				<p>10年建站经验 | 800家企业客户 | 多经验建站团队</p>
			</div>
			<ul class="indSec2_list marginTop60 transitionDelay">
				{notempty name="$case_pc_list"}
				{foreach $case_pc_list as $vo}
				<li>
					<a href="{:url('index/index/caseDetail')}?id={$vo.id}">
						<div class="indSec2_img">
							<img src="__CDN__{$vo.image}" alt="" width="100%">
						</div>
						<div class="indSec2_txt">
							<h6>{$vo.title}</h6>
							<p>{$vo.desc}</p>
						</div>
					</a>
				</li>
				{/foreach}
				{/notempty}
			</ul>
			<a class="comment_btn marginTop60" href="{:url('index/index/case')}">查看更多</a>
		</div>
	</div>

	{notempty name="$case_pc_list"}
	<div class="indSec3 padding80">
		<ul class="indSec3_list transitionDelay2 hidden-xs">
			{foreach $case_pc_list as $vo}
			<li>
				<a href="{:url('index/index/caseDetail')}?id={$vo.id}" style="background: url(__CDN__{$vo.image}) center top/cover no-repeat;"></a>
			</li>
			{/foreach}
		</ul>
		<div class="swiper-container indSwiper2 indSec3_list visible-xs">
			<div class="swiper-wrapper">
				{foreach $case_pc_list as $vo}
				<div class="swiper-slide">
					<li>
						<a href="{:url('index/index/caseDetail')}?id={$vo.id}" style="background: url(__CDN__{$vo.image}) center top/cover no-repeat;"></a>
					</li>
				</div>
				{/foreach}
			</div>
		</div>
	</div>
	{/notempty}

	<div class="indSec4 padding80">
		<div class="container transitionDelay2">
			<div class="comment_title">
				<h6>关于我们</h6>
				<p>10年建站经验 | 800家企业客户 | 多经验建站团队</p>
			</div>
			<div class="indSec4_txt marginTop60">
				<p>{$Think.config.site.company_about}</p>
			</div>
			<a class="comment_btn marginTop60" href="{:url('index/index/about')}">查看更多</a>
			<div class="indSec4_img marginTop60">
				<img src="__CDN__/home/images/indSec4_img.jpg" alt="" width="100%">
			</div>
		</div>
	</div>

	<div class="indSec5 padding80">
		<div class="container">
			<div class="comment_title">
				<h6>新闻中心</h6>
				<p>10年建站经验 | 800家企业客户 | 多经验建站团队</p>
			</div>
			<ul class="indSec5_list marginTop60 transitionDelay2">
				{notempty name="$news_list"}
				{foreach $news_list as $vo}
				<li>
					<a href="{:url('index/index/newsdetail')}?id={$vo.id}">
						<div class="indSec5_img">
							<img src="__CDN__{$vo.image}" alt="" width="100%">
							<div class="time">{$vo.date}</div>
						</div>
						<div class="indSec5_txt">
							<h6>{$vo.title}</h6>
							<p>{$vo.desc}</p>
						</div>
					</a>
				</li>
				{/foreach}
				{/notempty}
			</ul>
			<a class="comment_btn marginTop60" href="{:url('index/index/news')}">查看更多</a>
		</div>
	</div>

</main>
<!--  / warpper  -->

<script>
$(function() {

	// banner轮播图
	var indSwiper = new Swiper('.indSwiper', {
		loop: true,
		speed: 600,
		observer: true,
		observeParents: true,
		autoplay: 5000,
		autoplayDisableOnInteraction: false,
    	// slidesPerView: 'auto',
		slidesPerGroup: 1,
		// centeredSlides: true,
		paginationClickable: true,
		prevButton: '.indSwiper_prev',
		nextButton: '.indSwiper_next',
		simulateTouch: false,
		breakpoints: { 
		    768: {
				slidesPerView: 1,
				spaceBetween: 20,
		    },
		}
	})

	// 案例手机端轮播
	var indSwiper2 = new Swiper('.indSwiper2', {
		loop: true,
		speed: 600,
		observer: true,
		observeParents: true,
		autoplay: 5000,
		autoplayDisableOnInteraction: false,
		slidesPerGroup: 1,
		simulateTouch: false,
		spaceBetween: 20,
	})

})

$(window).ready(function(){
	$('.headerNav li').eq(0).addClass('on');
})
$(window).load(function(){
	
})
$(window).resize(function(){
	
})

$(window).scroll(function () {
    var h = $(window).scrollTop()
    
    if (h > $('.banner').offset().top + 200 && h < $('.indSec1').offset().top) {
        $('.indSec1').addClass('on')
    } else if (h > $('.indSec1').offset().top + 200 && h < $('.indSec2').offset().top - $('.indSec2').outerHeight(true)/4) {
        $('.indSec2').addClass('on')
    } else if (h > $('.indSec2').offset().top + 200 && h < $('.indSec3').offset().top - $('.indSec3').outerHeight(true)/4) {
        $('.indSec3').addClass('on')
    } else if (h > $('.indSec3').offset().top + 200 && h < $('.indSec4').offset().top - $('.indSec4').outerHeight(true)/4) {
        $('.indSec4').addClass('on')
    } else if (h > $('.indSec4').offset().top + 200 && h < $('.indSec5').offset().top - $('.indSec5').outerHeight(true)/4) {
        $('.indSec5').addClass('on')
    }
})

</script>
